import type { FC } from 'react';
import { Suspense, useState, useEffect } from 'react';
import http from '@/utils/axios';
import { Carousel, Tabs, Spin } from 'antd';
import './style.less';
import {
  AddressIcon,
  LocationIcon,
  PhoneIcon,
  UnsetIcon,
  ShareIcon,
  MsgIcon,
} from '@/components/Icon';

const { TabPane } = Tabs;

type BannerListType = {
  Thumb: string;
  Url: string;
};
type BaseInfoType = {
  Address: string;
  BSM: string;
  Desc: string;
  FlowStep: string;
  ID: string;
  LandClassify: string;
  Name: string;
  Recommoned: number;
};
type IntroduceListType = {
  Desc: string;
  Thumb: string;
  Title: string;
  Url: string;
};
type TelListType = {
  TelName: string;
  TelNo: string;
};
interface dataType {
  BannerList: BannerListType[];
  BaseInfo: BaseInfoType;
  IntroduceList: IntroduceListType[];
  TelList: TelListType[];
  ID: string;
  GuiHuaTiaoJianZhiBiaoList: any[];
}

const Analysis: FC<any> = () => {
  const [data, setData] = useState<dataType>({
    BannerList: [],
    BaseInfo: {
      Address: '',
      BSM: '',
      Desc: '',
      FlowStep: '',
      ID: '',
      LandClassify: '',
      Name: '',
      Recommoned: 0,
    },
    GuiHuaTiaoJianZhiBiaoList: [],
    IntroduceList: [],
    TelList: [],
    ID: '',
  });

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    http.get('/api/APIJSONV3/LandDetail/1a215c06-bb6d-4cc5-80bc-17da8f5c8488.json').then((res) => {
      console.log('Res', res.data.GuiHuaTiaoJianZhiBiaoList);
      setData(res.data);
      setLoading(false);
    });
  }, []);

  const tranFromObj = (key = '') => {
    return {
      JianZhuGaoDu: '建筑高度',
      JianZhuMiDu: '建筑密度',
      LvDiLv: '绿地率',
      RongJiLv: '容积率',
      Title: void 0,
      YongDiMianJi: '用地面积',
      YongDiXingZhi: '用地性质',
    }[key];
  };

  return (
    <div>
      <Spin spinning={loading}>
        <Carousel className="banner" autoplay>
          {data?.BannerList.map((item, index) => {
            return (
              <div key={index}>
                <img object-fit="cover" width={'100%'} height="300px" src={item.Url}></img>
              </div>
            );
          })}
        </Carousel>
        <div className="baseInfo box">
          <h1>
            {data?.BaseInfo.Name} <span className="tag">{data?.BaseInfo.FlowStep}</span>
          </h1>
          <div className="adress">
            <div>
              <AddressIcon
                style={{
                  marginRight: 5,
                }}
              />
              {data?.BaseInfo.Address}
            </div>
            <div className="right">
              <div className="loca">
                <LocationIcon></LocationIcon>
                <div>定位</div>
              </div>
              <div className="phone">
                <PhoneIcon></PhoneIcon>
                <div>电话</div>
              </div>
            </div>
          </div>
          <div className="bottom">
            <div>
              <UnsetIcon></UnsetIcon>
              <span>收藏</span>
            </div>
            <div>
              <MsgIcon></MsgIcon>
              <span>留言</span>
            </div>
            <div>
              <ShareIcon></ShareIcon>
              <span>转发</span>
            </div>
          </div>
        </div>

        <div className="main">
          <div className="basicTitle">地块简介</div>
          <div className="text">{data?.BaseInfo.Desc}</div>
          <div className="basicTitle">规划用地指标</div>
        </div>
        <div className="main2">
          <div className="main2_cont">
            <Tabs
              defaultActiveKey="1"
              onChange={(val) => {
                console.log(val);
              }}
            >
              {data?.GuiHuaTiaoJianZhiBiaoList.map((e, index) => {
                return (
                  <TabPane tab={e.Title} key={++index}>
                    {Object.entries(e).map(([key, value], index) => {
                      return tranFromObj(key) ? (
                        <div key={index}>
                          <div className="title">{tranFromObj(key)}</div>
                          <div className="text">{value}</div>
                        </div>
                      ) : null;
                    })}
                  </TabPane>
                );
              })}
            </Tabs>
            <div className="tips">
              <span>*</span> 免责声明：以上信息仅供参考，地块指标以实际出让公告为准
            </div>
          </div>
          <div className="foot">
            <div className="basicTitle">地块介绍</div>

            <Tabs
              defaultActiveKey="1"
              onChange={(val) => {
                console.log(val);
              }}
            >
              {data?.IntroduceList.map((e, index) => {
                return (
                  <TabPane tab={e.Title} key={++index}>
                    <div style={{}}>
                      <p>{e.Desc}</p>
                      <img
                        width={'60%'}
                        src={e.Url}
                        style={{
                          margin: '0 auto',
                        }}
                      ></img>
                    </div>
                  </TabPane>
                );
              })}
            </Tabs>
          </div>
        </div>
      </Spin>
    </div>
  );
};

export default Analysis;
